<template>
  <!--查看明细-->
	<div id="app">
      <loading v-if="loading"></loading>
      <div v-else id="coupon" class="coupon backf4">
            <div class="coupon-box">
                <div class="list relative" v-for="(usable,idx) in redPacketList" :class="usable.is_useful == 1?'usable-coupon':'unusable-coupon'">
                    <div class="item2">
                        <p class="text" v-text="usable.game_title"></p>
                        <p class="time"><span>有效期：{{usable.end_time | time("yyyy-MM-dd hh:mm",usable.end_time)}}</span></p>
                        <h3 v-text="'【满'+usable.limit_price+'元可用】'"></h3>
                    </div>
                    <div class="item1"><span class="icon">￥</span><span class="money"  v-text="usable.price"></span></div>
                    <div class="absolute unusable-tag center" v-if="usable.is_useful !=1">暂不可用</div>
                </div>
                <div v-show="redPacketList.length == 0">
                  <div class="flex" >
                    <img src="../../../assets/img/no-data-coupon.png" alt="点击屏幕，重新加载~" class="no-data"/>
                  </div>
                  <div class="default-text center">没有优惠券~</div>
                </div>
          </div>
      </div>
	</div>
</template>
<script>
import './index.css'
import common from 'assets/js/common'
import Loading from "components/loading.vue"
export default {
  data() {
    return {
        redPacketList:[],
        loading:true,
    }
  }, 
  //在挂载开始之前被调用
  mounted:function(){
  	this.getCoupon(); 
  }, 
  components:{ Loading },
  //相关操作事件
  methods: {
     getCoupon:function(){
        common.ajax({
            type:'GET',
            url:"api/adder/redpacket"
        }).then(res=>{
            this.loading = false;
            let result = res.data.sort(common.compare("is_useful",'desc'));
            this.redPacketList = result;
        })
      }
  }
}
</script>

